<script>
import gsap from "gsap";
import { ScrollTrigger } from "gsap/ScrollTrigger";
import { Flip } from "gsap/Flip";
import { MotionPathPlugin } from "gsap/MotionPathPlugin";

export default {
  name: "ImageGallery",
  mounted() {
    gsap.registerPlugin(ScrollTrigger);

    let wheel = document.querySelector(".wheel");
    let images = gsap.utils.toArray(".wheel__card");

    function setup() {
      let radius = wheel.offsetWidth / 2;
      let center = wheel.offsetWidth / 2;
      let total = images.length;
      let slice = (2 * Math.PI) / total;

      images.forEach((item, i) => {
        let angle = i * slice;

        let x = center + radius * Math.sin(angle);
        let y = center + radius * Math.cos(angle);

        gsap.set(item, {
          rotation: angle + "-rad",
          xPercent: -50,
          yPercent: -50,
          x: x,
          y: y,
        });
      });
    }

    gsap.to(".wheel", {
      rotate: () => -360,
      ease: "none",
      duration: images.length,
      scrollTrigger: {
        start: 0,
        end: "max",
        scrub: 1,
        snap: 1 / images.length,
        invalidateOnRefresh: true,
      },
    });

    setup();
    window.addEventListener("resize", setup);
  },
};
</script>

<template>
  <div class="container">
    <div class="header">
      <h1>human stories, <br />Superhuman audiovisuals</h1>
    </div>
    <section class="slider-section">
      <div class="wheel">
        <div v-for="n in 3" :key="n">
          <div class="wheel__card">
            <img src="../assets/ScrollTrigger/1.png" alt="" />
          </div>
          <div class="wheel__card">
            <img src="../assets/ScrollTrigger/2.png" alt="" />
          </div>
          <div class="wheel__card">
            <img src="../assets/ScrollTrigger/3.png" alt="" />
          </div>
          <div class="wheel__card">
            <img src="../assets/ScrollTrigger/4.png" alt="" />
          </div>
          <div class="wheel__card">
            <img src="../assets/ScrollTrigger/5.png" alt="" />
          </div>
          <div class="wheel__card">
            <img src="../assets/ScrollTrigger/6.png" alt="" />
          </div>
          <div class="wheel__card">
            <img src="../assets/ScrollTrigger/7.png" alt="" />
          </div>
          <div class="wheel__card">
            <img src="../assets/ScrollTrigger/8.png" alt="" />
          </div>
          <div class="wheel__card">
            <img src="../assets/ScrollTrigger/9.png" alt="" />
          </div>
          <div class="wheel__card">
            <img src="../assets/ScrollTrigger/10.png" alt="" />
          </div>
        </div>
      </div>
    </section>
    <div class="scroll-down">Scroll down</div>
    <div class="scroll-down-icon">
      <i class="el-icon-arrow-down"></i>
    </div>
  </div>
</template>

<style scoped>
.container {
  padding: 0;
  margin: 0;
  height: 600vh;
  width: 100vw;
  background: #90836a;
  color: #000;
}

.header {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 60vh;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
}

h1 {
  font-size: 8vw;
  font-weight: lighter;
  text-align: center;
}

.slider-section {
  height: 22vh;
  position: fixed;
  bottom: 0;
  width: 100%;
}

.wheel {
  position: absolute;
  top: 0;
  left: 50%;
  transform: translateX(-50%);
  display: flex;
  align-items: center;
  justify-content: center;
  width: 300vw;
  height: 300vw;
  max-width: 2000px;
  max-height: 2000px;
}

.wheel__card {
  position: absolute;
  top: 0;
  left: 0;
  width: 6%;
  max-width: 200px;
  aspect-ratio: 1 / 1;
  cursor: pointer;
}

img {
  width: 100%;
  pointer-events: none;
  z-index: 999;
  cursor: pointer;
}

.scroll-down-icon {
  position: fixed;
  top: 4em;
  right: 2em;
}

.scroll-down-icon i {
  font-size: 50px;
}

.scroll-down {
  position: fixed;
  top: 3em;
  left: 2em;
  color: #000;
  font-weight: 400;
  text-transform: uppercase;
  font-size: 20px;
  overflow: visible;
}
</style>
